<template>
  <div class="reserve-detail pd-20">
    <el-button type="primary"
               @click="backPage">返 回</el-button>
    <el-card class="mt-20 ">
      <el-row class="text-box">
        <el-col :span="6">
          <div class="grid-content">活动名称：<span class="text">{{dataObj.name}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">参与公司：
            <el-tag type="success"
                    v-for="item in dataObj.activityBeforeAppointmentCompanyDtos"
                    :key="item.id"
                    style="margin-right:5px;margin-bottom:5px;">
              {{item.companyName}}</el-tag>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">预约截止日期：<span class="text">{{commonFunction.timestampFormat(new Date(dataObj.expirationDate), 'yyyy-MM-dd')}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">预约费用：<span class="text">{{dataObj.appointmentAward}}元/人</span></div>
        </el-col>
      </el-row>
      <div class="mt-20">
        <h3>已预约总人数：<span class="text">{{dataObj.totalCount}}人</span></h3>
        <el-select v-model="companyId"
                   placeholder="请选择公司"
                   class="w-200 mt-20"
                   clearable
                   @clear="getList"
                   @change="getList">
          <el-option v-for="item in companyList"
                     :key="item.companyId"
                     :label="item.companyName"
                     :value="item.companyId">
          </el-option>
        </el-select>
        <h3 class="mt-20">累计预约：<span class="text">{{totalCount}}人</span></h3>
      </div>
      <element-table class="mt-20"
                     :columns="columns"
                     :data="tableData"
                     v-loading="loading"
                     pager
                     :pageTotal="pageTotal"
                     :pageIndex="pageIndex"
                     :pageSize="pageSize"
                     @handleChangePage="handleChangePage">
      </element-table>
    </el-card>
  </div>
</template>
<script>
  import ElementTable from '@/base/ElementTable'
  export default {
    name: 'reserveDetail',
    data () {
      return {
        loading: false,
        companyId: '',
        companyList: [],
        dataObj: {},
        tableData: [],
        routeParams: JSON.parse(this.$route.query.routeParams),
        columns: [
          {
            label: '分店名称',
            prop: 'hospitalName',
          }, {
            label: '地址',
            prop: 'address',
          }, {
            label: '店长姓名',
            prop: 'manager',
            align: 'center',
          }, {
            label: '联系方式',
            prop: 'phone',
            align: 'center'
          }, {
            label: '已预约人数',
            prop: 'count',
            align: 'center'
          }
        ],
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0, // 累计预约
      }
    },
    methods: {
      backPage () {
        this.$router.push({ name: 'activityReserve' });
      },
      async getList () {
        const { data: res } = await this.post(this.api.promote.getHospitalAppointmentNum, {
          appointmentId: this.dataObj.id,
          companyId: this.companyId,
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize
        });
        if (res.code === '200') {
          this.tableData = res.object.companyHospitalDtos;
          this.pageTotal = res.totalNum;
          this.totalCount = res.object.totalCount;
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
    },
    created () {
      this.dataObj = this.routeParams;
      this.companyList = this.dataObj.activityBeforeAppointmentCompanyDtos;
      this.companyId = this.companyList[0].companyId;
      this.getList();
    },
    components: {
      'element-table': ElementTable
    }
  }
</script>
<style lang="scss" scoped>
  .reserve-detail {
    font-size: 14px;
    .text {
      color: #f00;
    }
    h3 {
      font-weight: normal;
      font-size: 15px;
    }
  }
</style>